<template>
  <div class="main">
    <el-affix>
      <Header />
    </el-affix>
    <div class="home-box">
      <h1 style="font-size: 35px; margin: 60px 0; text-align: center;">欢迎使用，立木生物量数据采集系统！</h1>
      <div style="text-align: center;">
        <span style="line-height: 100px; font-size: 20px; color: #dadada;">快捷入口：</span>
        <ul class="kjrk">
          <li @click="openTab({ name: '样木管理', path: '/admin/dataManage/tree' })">
            <svg-icon icon="tree" />
            <span>样木管理</span>
          </li>
          <li @click="openTab({ name: '样地管理', path: '/admin/field/sampleArea' })">
            <svg-icon icon="tree-area" />
            <span>样地管理</span>
          </li>
          <li @click="openTab({ name: '树种管理', path: '/admin/field/treeSpecies' })">
            <svg-icon icon="tree-forest" />
            <span>树种管理</span>
          </li>
          <li @click="openTab({ name: '数据汇总', path: '/admin/dataManage/totals' })">
            <svg-icon icon="total" />
            <span>数据汇总</span>
          </li>
        </ul>
      </div>
    </div>
    <Footer />
  </div>
  <!-- <el-backtop target=".main" :right="100" :bottom="100" /> -->
  <el-backtop target=".main" :right="100" :bottom="50" :visibility-height="10" title="返回顶部">
    <svg-icon icon="back-top" /><br>
  </el-backtop>
</template>

<script setup>
import Header from '@/layout/header/index.vue'
import Footer from '@/layout/footer/index.vue'
import router from '@/router'
// 获取全局状态管理信息
import { useTabsStore } from '@/stores/tabs';
const tabsStore = useTabsStore()

const openTab = (item) => {
  router.push(item.path)
  tabsStore.ADD_TABS(item)
}

</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  overflow: auto;
  color: #fff;

  // background-image: linear-gradient(to bottom, rgba(0, 49, 29, 0.3), rgba(0, 0, 0, 0.8)), url("@/assets/images/login-background.jpg");
  // background-size: cover; // 铺满容器，保持比例
  // background-repeat: no-repeat;
  // background-position: center;

  background-image: linear-gradient(to bottom, rgba(0, 49, 29, 0.3), rgba(0, 0, 0, 0.8)), url("@/assets/images/login-background.jpg");
  background-size: cover;
}

.home-box {
  max-width: 1224px;
  margin: 0 auto;
  text-align: left;
  padding: 10px 0;
  font-size: 14px;
  font-weight: bold;
  min-height: 75vh;
  // background: rgba(255, 255, 255, 0.05);
}


.kjrk {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.kjrk li {
  /* background-color: antiquewhite; */
  border-radius: 20px;
  text-align: center;
  border: 1px solid #e9e9e9;
  background-color: rgba(255, 255, 255, 0.1);
  min-height: 60px;
  line-height: 60px;
  padding: 5px 0;
  color: #dadada;
  font-size: 18px;
  align-items: center;
  // transition: all 0.1s;
  transition: var(--el-transition-duration);
}

.kjrk li:hover {
  cursor: pointer;
  transform: translateY(-4px);
  color: var(--el-color-primary);
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.4);
}

.kjrk li:hover>svg {
  // font-size: 30px;
  color: var(--el-color-primary);
}

.kjrk li svg {
  font-size: 28px;
  font-weight: bold;
  margin-right: 15px;
}


.el-backtop {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.el-backtop:hover {
  background-color: #fff !important;
  color: var(--el-color-primary);
}
</style>
